import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { FC } from 'react';

type SortableItem_PropsType = {
  id: string,
  children: JSX.Element | JSX.Element[]
}

const SortableItem: FC<SortableItem_PropsType> = (props) => {
  const { id, children } = props
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
  } = useSortable({ id});
  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };
  return (
    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
        {children}
    </div>
  )
}

export default SortableItem